<template>
  <div class="points-wrap">
    <h1>
      <div>杏坛艺拍(左)和艺加拍卖(右)</div>
      <div>哪个更靠谱？</div>
    </h1>
    <div class="vote-wrap">
      <div class="vote-wrap__click">
          <div class="vote-view" @click="vote(1)">
            <img src="./assets/WechatIMG28.jpeg">
            <div class="shade" v-show="total>0"></div>
            <div class="pillar" :style="{height:scale+'%',bottom:scale<40?'0':''}" :class="scale>=50?'blue':'gray'">
              <div>
              <i class="fa fa-thumbs-o-up" v-if="scale>=50"></i>
              <i class="fa fa-thumbs-o-down" v-else></i>
              <br>
                {{scale}}%
              </div>
            </div>
          </div>
          <div class="vote-view" @click="vote(2)">
            <img src="./assets/WechatIMG40.jpeg">
            <div class="shade" v-show="total>0"></div>
            <div class="pillar" :style="{height:100-scale+'%',bottom:(100-scale)<40?'0':''}" :class="scale<=50?'blue':'gray'">
              <div>
                <i class="fa fa-thumbs-o-up" v-if="scale<=50"></i>
                <i class="fa fa-thumbs-o-down" v-else></i>
                <br>
                {{100-scale}}%
              </div>
            </div>
          </div>
      </div>
      <div class="desc-wrap">
        <div>点击图片进行投票</div>
        <div>
          <!-- <i class="fa fa-commenting-o" aria-hidden="true"></i>111 -->
          <i class="fa fa-bar-chart"></i>{{total}}
        </div>
      </div>
    </div>
    <div class="share">
    <mt-button type="primary">让朋友也来选</mt-button>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      craft: {}
    }
  },
  computed: {
    scale () {
      let number1 = this.craft.number_1 || 0
      let number2 = this.craft.number_2 || 0
      let scale = number1 / (number1 + number2)
      return Math.round(scale * 100)
    },
    total () {
      let number1 = this.craft.number_1 || 0
      let number2 = this.craft.number_2 || 0
      return number1 + number2
    }
  },
  methods: {
    getCraft () {
      this.$http.craft().then(res => {
        this.craft = res.data[0]
      }).catch(err => {
        console.error(err)
        this.$toast({
          message: '请求失败',
          iconClass: 'fa fa-times'
        })
      })
    },
    vote (id) {
      this.$http.vote({c_id: this.craft.id, img: id}).then(res => {
        let toast = this.$toast({
          message: '投票成功',
          iconClass: 'fa fa-check'
        })
        setTimeout(() => {
          toast.close()
        }, 800)
        this.getCraft()
      }).catch(err => {
        this.$toast({
          message: '投票失败',
          iconClass: 'fa fa-times'
        })
        console.error(err)
      })
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.getCraft()
    })
  }
}
</script>
<style lang="less" scoped>
.points-wrap{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  padding-bottom: 30px;
  background-color: #000;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  h1{
    text-align: center;
    padding: 0.8rem 0;
  }
  .vote-wrap{
    width: 90%;
    margin: auto;
    .vote-wrap__click{
      height: 16rem;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      img{
        width: 100%;
        height: 100%;
      }
      .vote-view{
        position: relative;
        .shade{
          position: absolute;
          top:0;
          height: 100%;
          width: 100%;
          background-color: rgba(0, 0, 0, 0.3)
        }
        &>div.pillar{
          position: absolute;
          width: 2.5rem;
          // height: 100%;
          bottom: 0;
          left: 50%;
          margin-left: -1.25rem;
          text-align: center;
          border-radius: 5px;
          & div{
            position: relative;
          }
          &.gray{
            background-color: #707070;
          }
          &.blue{
            background-color: #1182e3;
          }
        }
      }
    }
    .desc-wrap{
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      &>div{
        width: 100%;
        text-align: center;
        padding-top: 5px;
        &:last-of-type{
          text-align: right;
        }
        i{margin-right: 5px;}
      }
    }
  }
  .share{
    padding:20px;
  }
  .mint-button {
    display: block;
    width: 100%;
  }
}
</style>
